@import "widget/variable.less";
@import "widget/basic.less";
@import "widget/dialog.less";
@import "widget/animation.less";

body {
  background: @bgcolor;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: @fontColor;
  text-align: center;
  > div {
    //display: table-cell;
    background: url(img/bg-old.jpg) no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px auto auto -400px;
    width: 800px;
    height: 600px;
    > header {
      margin: 0 auto;
      height: 290px;
      background: @testColor;
      text-align: center;
      > div {
        vertical-align: middle;
      }
    }
    > section {
      background: @testColor;
      width: 558px;
      height: 184px;
      margin: 18px auto 0 auto;
      vertical-align: middle;
      text-align: center;
      position: relative;
      #luckyDrawing {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 100px;
        margin-left: -100px;
        margin-top: -50px;

        input {
          width: 100%;
          height: 100%;
          font-size: 4rem;
          padding: 1rem;
          box-sizing: border-box;
          text-align: center;

        }
      }
      > #result {
        width: 100%;
        height: 100%;
        text-align: center;
        display: table;
        > div {
          display: table-cell;
          vertical-align: middle;
          color: black;
          > span {
            display: block;
            float: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 0 1rem;
            text-align: center;
            font-size: 1.5rem;
            width: 14.28571%; //一行七个
            > b {
              color: @strongColor;
            }
          }
          &.p1 { //1人中奖
            > span {
              width: 100%;
              font-size: 8rem;
            }
          }
          &.p2 { //2人中奖
            > span {
              width: 50%;
              font-size: 4rem;
            }
          }
          &.p3 { //3人中奖
            > span {
              width: 33.333333%;
              font-size: 3.5rem;
            }
          }
          &.p4 { //4人中奖
            > span {
              width: 25%;
              font-size: 3rem;
            }
          }
          &.p5, &.p6, &.p7, &.p8, &.p9, &.p10 {
            > span {
              width: 25%;
              font-size: 2.5rem;
            }
          }
          &.p11, &.p12, &.p13, &.p14, &.p15, &.p16, &.p17, &.p18, &.p19, &.p20, &.p21, &.p22, &.p23, &.p24, &.p25 {
            > span {
              width: 20%;
              font-size: 2rem;
            }
          }
        }

      }
    }
    > footer {
      height: 20%;
      text-align: center;
      vertical-align: middle;
      > div {
        vertical-align: middle;
        background: @testColor;
        margin-top: 60px;
        > input {
          padding: 1rem;
          font-size: 1rem;
          border: none;
          outline: none;
          border-radius: 1rem;
          background: @testColor;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          width: 172px;
          margin-right: 16px;
        }
        > button {
          background: @testColor;
          border: none;
          -webkit-appearance: none;
          -webkit-tap-highlight-color: transparent;
          height: 3rem;
          border-radius: 1rem;
          font-size: 1rem;
          &#btnStart {
            width: 361px;
            margin-right: 16px;
            color: white;
          }
          &#btnReset {
            width: 37px;
            height: 37px;
            border-radius: 50%;
            padding: 0;
            display: inline-block;
          }
        }
      }
    }
  }
}

#bgLuckyDrawEnd {

}